<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue2 CodeMirror Lite for JS</title>
    <style> [v-cloak] { display:none; } body { padding: 30px; font-family: Helvetica, Arial, sans-serif; font-weight: 300; } h1, h2, h3 { font-weight: 300; }</style>
  </head>
  <body>
    <h1>Lightweight Vue2 CodeMirror plugin</h1>
    <p>Pre-configured for JavaScript mode only, with linting & gutter errors / warnings on.</p>
    <main v-cloak id="app">
      <codemirror :code="code" @changed="changed" :options="options"></codemirror>
    </main>

    <h2>What's inside</h2>
    <ul>
      <li>JavaScript only mode (not configurable)</li>
      <li>lint via JSHINT (bundled, not configurable)</li>
      <li>dark theme only (`base16-dark`, <a href="https://sireniaeu.github.io/vue2-codemirror-lite-js">see demo</a>.)</li>
      <li>line numbers, line wrapping</li>
      <li>accepts additional CodeMirror options (<a href="http://codemirror.net/doc/manual.html">see some here</a>), except for mode, theme & those that require addons.</li>
      <li>size: ~255kb / ~84kb gzipped</li>
    </ul>

    <h3>
      <a href="https://github.com/sireniaeu/vue2-codemirror-lite-js">Github</a>. MIT.
    </h3>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="./bundle.js"></script>
    <script src="./0.js"></script>
    <script>
      var code = "function invariance(o) { \n" +
        "  var p = o.p; \n" +
        "  o.p = null; \n" +
        "  return p; \n" +
        "} \n\n" +
        "var subtype_p = p \n" +
        "var res = invariance(subtype_p); \n\n" +
        "return res'` \n"

      Vue.use(CodeMirror)

      var app = new Vue({
        el: '#app',
        data: function () {

          d:"sd",
          return {
            code: code,
            options: {
              tabSize: 2,
              lineNumbers: true,
              lineWrapping: true,
              line: true,
              gutters: ['CodeMirror-linenumbers', 'CodeMirror-lint-markers'],
              lint: true
            }
          }
        },

        methods: {
          changed: function (code) {
            console.log('changed', code)
          }
        }
      })
    </script>
  </body>
</html>
